<template>
  <div class="sort">
    <div class="header">
      <h2>文章类别</h2>
      <el-button class="btn" type="primary" size="default" @click="addCate">新增类别</el-button>
    </div>

    <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="id" width="180" />
        <el-table-column prop="name" label="名称" width="180" />
        <el-table-column prop="alias" label="别名" />
        <el-table-column label="Operations">
          <template #default="scope">
            <div class="operate-area">
                          <el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
            <el-button  @click="handleUpdate(scope.row)">更新</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog v-model="showAddPop" :title="popTitle" width="30%" :before-close="handleClose">
      <div class="add-form">
        <div class="input-area">
          <div class="title">分类名称</div>
          <el-input v-model="addCateParams.name" placeholder="分类名称" clearable></el-input>
        </div>
        <div class="input-area">
          <div class="title">分类别名</div>
          <el-input v-model="addCateParams.alias" placeholder="分类别名" clearable></el-input>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeCateAdd">取消</el-button>
          <el-button type="primary" @click="addConfirm">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import { getCates, addCates, delCates, updatecate } from '@/api/article/index.js'
import { ref, reactive ,computed} from 'vue'
import { ElMessage } from 'element-plus'

const dialogMode=ref('new') //弹框默认是新增 
const tableData = ref([])
// computed返回一个ref，所以可以用const变量承接
const popTitle=computed(()=>{
  if(dialogMode.value==='new') return '新增类别'
  if(dialogMode.value==='update') return '更新类别'
})


function getList() {
  getCates().then(el => {
    if (el.code === 0) {
      tableData.value = el.data
    }
  })
}

getList()

const showAddPop = ref(false)
const addCateParamsOrigin = { name: '', alias: '' }
const addCateParams = reactive({ ...addCateParamsOrigin })

function addCate() {
  showAddPop.value = true
}
//点右上角小叉号时触发
function handleClose() {
  closeCateAdd()
}
function addConfirm() {
  if(dialogMode.value==='new'){
    addCates(addCateParams).then(el => {
    if (el.code === 0) {
      ElMessage({
        message: '添加成功',
        type: 'success',
        duration: 3 * 1000
      })
      getList()
      closeCateAdd()
    }
  })
  }

  if(dialogMode.value==='update'){
    updatecate(addCateParams).then(el=>{
      if(el.code===0){
        ElMessage({
        message: '更新成功',
        type: 'success',
        duration: 3 * 1000
      })
      getList()
      closeCateAdd()
      }
    })
  }
}
function closeCateAdd() {
  showAddPop.value = false
  Object.assign(addCateParams, addCateParamsOrigin)
  if(dialogMode.value==='update'){
    delete addCateParams.id
    dialogMode.value='new'
  }
}

function handleDelete(id) {
  delCates(id).then(el => {
    if (el.code === 0) {
      ElMessage({
        message: '删除成功',
        type: 'success',
        duration: 3 * 1000
      })
      getList()
    }
  })
}
// -----更新--------------
function handleUpdate(row){
  dialogMode.value='update'
  addCateParams.Id=row.id
  showAddPop.value=true
}

</script>

<style lang="scss" scoped>
.sort {
  padding: 20px;

  .header {
    display: flex;

    .btn {
      margin-left: auto;
      align-self: flex-end;
    }
  }

  .table{
    @include tableModify;
  }

  .input-area+.input-area {
    margin-top: 15px;
  }

  .operate-area{
    display: flex;
    .el-button + .el-button{
      margin-left: 15px;
    }
  }
}
</style>